<template>
        <el-card shadow="never" style="max-height: 70vh; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                <el-form-item label="id:" prop="id" v-show="false">
                    <el-input v-model="form.id" disabled />
                </el-form-item>
                <el-form-item label="所属用户:" prop="user_id">
                    <SelectPage v-model="form.user_id" :url="'/admin/user/selectPage'" placeholder="请选择所属用户"
                                show_field="nickname" show_id="uid" query_field="uid" :multiple="false" disabled="" />
                </el-form-item>
                <el-form-item label="合作方:" prop="partner_id">
                    <SelectPage v-model="form.partner_id" :url="'/admin/pz.partner/selectPage'"  disabled="" placeholder="请选择合作方"
                                show_field="realname" show_id="id" query_field="id" :multiple="false" />
                </el-form-item>
                <el-form-item label="金额:" prop="money">
                    <el-input-number v-model="form.money" :step="1" :min="0" disabled></el-input-number>
                </el-form-item>
                <el-form-item label="状态:" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio v-for="(item, index) in status"
                                  :key="index"
                                  :label="item.value">{{ item.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="失败原因:" prop="pay_time" v-if="form.status === 6">
                    <el-input type="textarea" placeholder="请输入退款失败原因" v-model="form.fail_content" :max="150" clearable></el-input>
                </el-form-item>
                <el-form-item label="支付时间:" prop="pay_time" v-if="disabled">
                    <el-date-picker v-model="form.pay_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择支付时间" />
                </el-form-item>
                <el-form-item label="退款时间:" prop="refund_time" v-if="disabled">
                    <el-date-picker v-model="form.refund_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择退款时间" />
                </el-form-item>
                <el-form-item label="支付单号:" prop="order_sn" v-if="disabled">
                    <el-input v-model="form.order_sn" placeholder="请输入支付单号" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
import { regionData } from 'element-china-area-data'
export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                user_id: [{ required: true, message: "请输入所属用户", trigger: "blur" }],
                partner_id: [{ required: true, message: "请输入合作方ID", trigger: "blur" }],
                money: [{ required: true, message: "请输入金额", trigger: "blur" }],
                order_sn: [{ required: true, message: "请输入支付单号", trigger: "blur" }],
            },
            form: {  },
            // 区域选择配置
            areaOptions: regionData,
        }
    },
    computed: {
        status() {
            if (this.form.status >= 4)
                return [
                    { label: "申请退款", value: 4 },
                    { label: "退款成功", value: 5 },
                    { label: "退款失败", value: 6 },
                ]
            return [
                { label: "待付款", value: 1 },
                { label: "已付款", value: 2 },
                { label: "已取消", value: 3 },
            ]
        }
    },
    watch: {
        findFormData: {
           handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },

        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },

        // 表单重置
        reset() {
            this.resetForm('form')
        }
    }
}
</script>
